<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>初探WebGL | 送给子豪兄</title>
    <!--<link rel="shortcut icon" href="TemplateData/favicon.ico">-->
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Stone 1.0.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 100%; height: 100%; display: block"></div>
	  <div id="Text">
	  <br>
	  <br>
	  	<h1>初探WebGL</h1>
    <h2>综述</h2>
    <p>WebGL 是在浏览器上显示三维图形的一项技术。随着互联网与人们生活的深度融合，我们需要用三维图形这种比传统的Flash交互性更强的方式来处理信息。随着5G的普及，WebGL的应用将会进一步扩大。</p>
    <h2>WebGL特点</h2>
    <ul>
        <li>调用用户自己设备的显卡</li>
        <li>无需安装</li>
        <li>适用于浏览器（电脑、手机）、微信</li>
    </ul>
    <h2>学习</h2>
    <p>WebGL的学习道路，一是学习底层的WebGL知识，二是学习Three.js引擎。前者需要扎实的计算机图形学基础，入门很慢。后者则很适合新手入门，能用简短的语句产生一定的效果。但要达到精准的图形效果往往还是要掌握底层的WebGL知识。</p>
    <p>这两者有点像Unity里的unlit着色器和surface着色器。前者要交代清楚屏幕上每个像素点显示什么颜色，后者只需交代这个材质的漫反射、光泽度、法线、自发光等参数是多少即可。</p>
    <h2>Unity项目部署到WebGL</h2>
    <p>此网站就是将Unity项目部署到WebGL的一个例子。较之Three.js，利用Unity的可视化编辑器制作项目要简化很多。目前存在的问题：</p>
    <ul>
        <li>帧率不一致。浏览器上的帧率远低于Unity编辑器里的帧率。</li>
        <li>抗锯齿问题。Unity中设置了抗锯齿，但浏览器上仍有明显锯齿。</li>
    </ul>
	 </div>
    </div>

  </body>
</html>
